:root{
    --accent:#00a651;         /* green */
    --text:#333;
    --muted:#6f7a86;
    --line:#dcdfe3;
    --bg:#f5f7f9;
    --card:#ffffff;
    --radius:14px;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
  }
  .wrap{
    max-width:1100px;
    margin:28px auto 64px;
    padding:0 16px;
  }
  /* Header */
  .brand{
    display:flex; align-items:center; gap:10px;
    justify-content:center; margin:8px 0 14px;
    font-weight:700; letter-spacing:.02em;
  }
  .brand .logo{
    width:44px; height:44px; background:var(--accent); color:#fff;
    display:grid; place-items:center; border-radius:50%;
  }
  .brand .logo svg{width:26px; height:26px; fill:#fff}
  .brand .title{
    font-size:34px; font-weight:800;
  }
  .brand .title span{color:var(--accent)}
  /* Search bar */
  .searchbar{
    display:flex; gap:10px; justify-content:center; margin:10px 0 28px;
  }
  .searchbar input{
    width:min(680px,100%);
    padding:12px 14px; border:1px solid var(--line); border-radius:30px;
    outline:none; font-size:15px; background:#fff;
  }
  .searchbar button{
    padding:10px 18px; border:0; border-radius:10px;
    background:var(--accent); color:#fff; font-weight:600; cursor:pointer;
  }
  /* Grid */
  .grid{
    display:grid; gap:22px;
    grid-template-columns: repeat(4, 1fr);
  }
  @media (max-width:980px){ .grid{grid-template-columns: repeat(2, 1fr);} }
  @media (max-width:560px){ .grid{grid-template-columns: 1fr;} }

  .card{
    background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:18px 16px;
  }
  .card h3{
    margin:0 0 12px; display:flex; align-items:center; gap:10px;
    font-size:14px; letter-spacing:.08em; color:var(--muted);
    text-transform:uppercase;
  }
  .card h3 .ico{width:22px; height:22px; color:var(--accent)}
  .list{margin:0; padding:0; list-style:none;max-height:200px;overflow-y:auto}
  .list li{
    display:flex; align-items:center; gap:8px;
    padding:6px 0; border-bottom:1px dashed #eef1f4;
  }
  .list li:last-child{border-bottom:0}
  .check{
    width:16px; height:16px; border:1px solid var(--muted);
    border-radius:3px; display:inline-block; position:relative; flex:0 0 16px;
  }
  .list label{display:flex; align-items:center; gap:8px; cursor:pointer; width:100%}
  /* footer row */
  .footer-grid{
    display:grid; gap:22px; margin-top:24px;
    grid-template-columns: repeat(4, 1fr);
  }
  @media (max-width:980px){ .footer-grid{grid-template-columns: repeat(2, 1fr);} }
  @media (max-width:560px){ .footer-grid{grid-template-columns: 1fr;} }

  .muted{color:var(--muted)}
 #overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 104;
}


/* Overlay */
    .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 999;
    }

    /* Popup Box */
    .popup-box {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      width: 70%;
      max-width: 90%;
      text-align: center;
      box-shadow: 0px 4px 12px rgba(0,0,0,0.3);
      animation: fadeIn 0.3s ease-in-out;
      max-height: 800px;
      overflow-y: auto;
    }

    .popup-box h2 {
      margin-top: 0;
      font-size: 20px;
      color: #333;
    }

    .popup-box p {
      font-size: 14px;
      color: #555;
      margin: 10px 0 20px;
    }

    .popup-box button {
      padding: 10px 20px;
      border: none;
      background: #fbce0a;
      color: #000;
      font-weight: bold;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .popup-box button:hover {
      background: #e0b800;
    }

    /* Animation */
    @keyframes fadeIn {
      from { transform: scale(0.9); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }